<template>
    <view>
        <u-navbar title="退货详情" title-bold>
            <template #right>
                <view class="u-margin-right-20" style="color: #fc4f75 ;" @click="records">申请记录</view>
            </template>
        </u-navbar>
        <z-paging ref="paging" v-model="list" @query="upCallback">

            <view class="container" v-for="response in list" :key="response.id">
                <view v-if="response.status === 0">
                    <view class="status">
                        <text class="icon icon-warn"></text>
                        <text class="status-title">等待商家处理退款申请</text>
                    </view>
                    <view class="option-area">
                        <view class="option-area-countdown o-padding-x-sm"></view>
                        <view class="u-p-y-20"><u-button class="btns" type="d" @click="cancelApply">取消退货申请</u-button></view>
                    </view>
                </view>
                <view v-if="response.status === 1 && response.refundDeliverStatus === 0">
                    <view class="return-address u-padding-top-20">
                        <receive-data :userInfo="receive" aftersales bgColor="#F0F6FF" :option="false" :showRight="false"></receive-data>
                    </view>
                    <view class="cancel-action">
                        <view class="u-text-center o-font-bold">
                            <text class="icon icon-warn o-font-color-blue"></text>
                            <text class="u-margin-left-10">商家同意退款 七天退换 请退货给商家</text>
                        </view>
                        <view class="u-text-center grey" v-if="response.refundGoodsTime">
                            <text>退货时间：</text>
                            <text>{{ response.refundGoodsTime }}</text>
                        </view>
                        <view class="u-p-y-20 u-flex">
                            <u-button class="btns" :hair-line="false" @click="inputExpress">填写物流信息</u-button>
                            <u-button class="btns" type="d" @click="cancelApply">取消退货申请</u-button>
                        </view>
                    </view>
                </view>
                <view v-if="response.status === 1 && response.refundDeliverStatus === 1">
                    <view class="status">
                        <text class="icon icon-checked"></text>
                        <text class="status-title">已退货成功!商家收到货后确认退款</text>
                    </view>
                    <view class="option-area"></view>
                </view>
                <view v-if="response.status === 2">
                    <view class="status">
                        <text class="icon icon-checked"></text>
                        <text class="status-title">已完成线下退货,等待商家退款</text>
                    </view>
                    <view class="option-area"></view>
                </view>
                <view v-if="response.status === 3">
                    <view class="status vertical-center">
                        <text class="icon icon-checked"></text>
                        <text class="status-title">退款成功</text>
                    </view>
                </view>
                <view v-if="response.status === 4">
                    <view class="status">
                        <text class="icon icon-error-fill"></text>
                        <text class="status-title">商户拒绝了您的退款申请</text>
                    </view>
                    <view class="option-area">
                        <view>
                            拒绝原因：
                            <text>商户已拒绝您的退款申请，退款关闭</text>
                        </view>
                        <view>
                            拒绝时间：
                            <text>{{ response.updateTime }}</text>
                        </view>
                    </view>
                </view>
                <view v-if="response.status === 5">
                    <view class="status vertical-center">
                        <text class="icon icon-error-fill"></text>
                        <text class="status-title">取消退款 退款关闭</text>
                    </view>
                </view>
                <view class="refund-info">
                    <view class="title">基本信息</view>
                    <view v-if="response.status != 0">
                        退款类型：
                        <text>{{ response.typeName }}</text>
                    </view>
                    <view>
                        退款金额：
                        <text>￥{{ Number(response.refundTotalAmount || 0).toFixed(2) }}</text>
                    </view>
                    <view>
                        退款原因：
                        <text>{{ response.remark }}</text>
                    </view>
                    <view>
                        退款编号：
                        <text>{{ response.orderRefundNo }}</text>
                    </view>
                    <view>
                        申请人：
                        <text>{{response.addByType }} / {{ response.addByName}}</text>
                    </view>
                    <view>
                        申请时间：
                        <text>{{ response.addTime }}</text>
                    </view>
                    <view>
                        关联订单号：
                        <text>{{ response.orderId }}</text>
                    </view>
                </view>
                <!-- 物流信息 -->
                <view class="express-info" v-if="wmsRefund.deliverNo">
                    <view class="title">物流信息</view>
                    <view>
                        提交时间：
                        <text>{{ response.updateTime }}</text>
                    </view>
                    <view>
                        物流公司：
                        <text>{{ wmsRefund.expressName }}</text>
                    </view>
                    <view>
                        物流单号：
                        <text>{{ wmsRefund.deliverNo }}</text>
                    </view>
                    <view>
                        退货人：
                        <text>{{ wmsRefund.deliverByName }}</text>
                    </view>
                    <view>
                        联系电话：
                        <text>{{ wmsRefund.phone }}</text>
                    </view>
                    <view>
                        退货说明：
                        <text>{{ wmsRefund.remark }}</text>
                    </view>
                    <view>
                        退货凭证：
                        <u-grid :col="5" :border="false">
                            <u-grid-item v-for="(item,index) in wmsRefund.picIds" :key="index">
                                <u-image :src="`${global.CertificateFile}${item}`" width="100%" border-radius='10' mode="widthFix"></u-image>
                            </u-grid-item>
                        </u-grid>
                    </view>
                </view>
            </view>
        </z-paging>
        <u-popup v-model="show" mode="bottom">
            <view class="history" @touchmove.stop.prevent>
                <view class="u-text-center o-font-600 u-padding-y-20">申请记录</view>
                <u-time-line>
                    <block v-for="(node, index) in timeline" :key="'timeline' + index">
                        <u-time-line-item nodeTop="2">
                            <template v-slot:node v-if="index === 0">
                                <view class="u-node"><text class="icon" style="color: #FF9900;">&#xe650;</text></view>
                            </template>
                            <template v-slot:content>
                                <view class="u-flex u-row-between">
                                    <view class="u-flex-1">{{ node.appRemark }}</view>
                                    <view class="record-time u-flex-1 u-text-right">{{ node.addTime }}</view>
                                </view>
                            </template>
                        </u-time-line-item>
                    </block>
                </u-time-line>
            </view>
        </u-popup>
        <u-modal v-model="showModal" content="确认要取消退款退货申请?" title="" @confirm="confirm" show-cancel-button></u-modal>
    </view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { computed, ref } from 'vue';
import global from '@/config'

const show = ref(false)
const timeline = ref<any[]>([])
const response = ref<any>({})
const receive = ref({
    username: '',
    phone: '',
    address: ''
})
const warehouseId = ref('')
const refundId = ref('')

const showModal = ref(false)
let id = ''
const list = ref<any[]>([])

const paging = ref<any>(null)

const wmsRefund = computed(()=>{
    return response.value?.wmsRefund || {}
})

onLoad((option: any)=>{
    id = option.id
})

const upCallback = () => {
    uni.$u.$api.OrderApi.queryOrderRefundInfoApp({id})
        .then((res: any) => {
            response.value = res;
            refundId.value = res.wmsRefund.id; // 仓库退货主键
            if (res.status === 1 && res.wmsRefund && res.wmsRefund.mapAddress) {
                let r = res.wmsRefund.mapAddress;
                receive.value = {
                    username: r.name,
                    phone: r.phone,
                    address: r.provinceName + r.cityName + r.areaName + r.detailAddress
                };
                warehouseId.value = r.warehouseId;
                console.log('1');
                paging.value?.complete([res])
            } else {
                console.log('0');
                paging.value?.complete([res])
            }
        })
        .catch(() => {
            paging.value?.complete(false)
        });
}

const records = () =>{
    show.value = true;
    uni.$u.$api.OrderApi.queryOrderRefundLogListApp({
        orderRefundId: id
    }).then((res: any) => {
        timeline.value = res.reverse();
    });
}

const cancelApply = () => {
    showModal.value = true
}

const confirm = () => {
    uni.$u.$api.OrderApi.cancelOrderRefund({ id }).then(() => {
        paging.value?.reload()
        uni.$u.toast('取消成功!');
    });
}

// 填写 退货信息
const inputExpress = () => {
    uni.$u.$MRouter.inputExpressInfo.to(
        {
            id: refundId.value,
            address: receive.value.address,
            warehouseId: warehouseId.value,
            orderRefundId: id
        }
    );
}
</script>

<style scoped lang="scss">
.container {
    .status {
        color: white;
        line-height: 180rpx;
        text-align: center;
        height: 260rpx;
        display: flex;
        justify-content: center;
        background-image: url(@/static/images/bg-salesReturn.png);
        background-size: 100% auto;
        background-repeat: no-repeat;

        &-title {
            font-size: 32rpx;
            font-weight: bold;
            margin-left: 10rpx;
        }
    }
    .vertical-center {
        line-height: 260rpx;
    }
    .option-area {
        border-radius: 10rpx;
        background-color: $uni-bg-color;
        margin: 0 30rpx;
        padding: 20rpx;
        margin-top: -50rpx;
        min-height: 100rpx;
        &-countdown {
            line-height: 60rpx;
        }
    }
    .cancel-action,
    .refund-info,
    .express-info{
        border-radius: 10rpx;
        background-color: $uni-bg-color;
        margin: 0 30rpx;
        padding: 20rpx;

        &-title {
            text-align: center;
            font-weight: bold;
            line-height: 80rpx;
        }

        .btns {
            width: 40%;
        }
        .title{
            font-weight: bold;
        }
    }

    .refund-info {
        margin-top: 20rpx;
        line-height: 60rpx;
        font-size: 26rpx;
    }

    .express-info{
        margin-top: 20rpx;
        line-height: 60rpx;
    }
}
.grey {
    color: #999999;
    line-height: 60rpx;
}
.history {
    padding: 40rpx;
    min-height: 500rpx;

    .record-time {
        font-size: 24rpx;
    }
}
</style>
